﻿<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Log In</title>
        
		<script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" rel="stylesheet" type="text/css" />
        
        <script>
            var bolCurl = false;

            function login() {
                'use strict';
                var strQueryString = GS.getQueryString();

                document.getElementById('error').textContent = '';

                GS.addLoader('login', 'Logging In...');
                GS.ajaxJSON((location.pathname.indexOf('/v1/') === 0 ? '/v1/' : '/') + 'env/auth'
                            , 'action=login' +
                               '&username=' + encodeURIComponent(document.getElementById('normal-uname').value) +
                               '&password=' + encodeURIComponent(document.getElementById('normal-pword').value)
                            , function (data, error) {
                    GS.removeLoader('login');

                    if (!error) {
                        GS.setCookie('greyspots_uname', document.getElementById('normal-uname').value, 1000000);

                        if (GS.qryGetVal(strQueryString, 'redirect')) {
                            window.location = GS.qryGetVal(strQueryString, 'redirect');
                        } else {
                            window.location = data.dat + '?cache=no';
                        }

                    } else {
                        document.getElementById('error').innerHTML =
                                encodeHTML(GS.trim(data.error_text.trim(), '"'))
                                .replace(/\\n/gi, '<br />')
                                .replace(/\\/gi, '');
                        document.getElementById('normal-pword').value = '';
                    }
                });
            }

            window.addEventListener('load', function () {
                "use strict";
                var strQueryString = GS.getQueryString();
                var strUnameCookie = GS.getCookie('greyspots_uname');

                // if there is a username cookie: set the username input value
                if (strUnameCookie) {
                   document.getElementById('normal-uname').value = decodeURIComponent(strUnameCookie);
                }

                // if we are not on a touch device: put the focus into the first empty control out of "normal-uname" and "normal-pword"
                if (!evt.touchDevice) {
                    if (strUnameCookie) {
                        document.getElementById('normal-pword').focus();
                    } else {
                        document.getElementById('normal-uname').focus();
                    }
                }

                // fill the error element with any error text from the query string (coalesce to empty string)
                document.getElementById('error').textContent = GS.qryGetVal(strQueryString, 'error') || '';

                //// if there is error text in the query string: alert
                //if (GS.qryGetVal(strQueryString, 'error')) {
                //    alert(GS.qryGetVal(strQueryString, 'error'));
                //    window.location.search = '';
                //}

                // bind keydown for the "normal-pword" field
                document.getElementById('normal-pword').addEventListener('keydown', function (event) {
                    if (event.keyCode === 13) {
                        login();
                    }
                });

                // bind click for the "button-login" button
                document.getElementById('button-login').addEventListener('click', function () {
                       login();
                });

                // GS.ajaxJSON((location.pathname.indexOf('/v1/') === 0 ? '/v1/cluster' : '/env') + '/postage.actionnc_roles', '', function (data, error) {
                //     var i, len, strHTML = '', selectElement = document.createElement('gs-select');

                //     if (!error) {
                //         for (i = 0, len = data.dat.length; i < len; i += 1) {
                //             strHTML +=  '<option>' + encodeHTML(data.dat[i]) + '</option>';
                //         }

                //         selectElement.setAttribute('id', 'normal-uname');
                //         selectElement.innerHTML = strHTML;
                //         selectElement.value = strUnameCookie || '';

                //         document.getElementById('container').replaceChild(selectElement, document.getElementById('normal-uname'));
                //     }
                // });
            });
        </script>
        <style>
            #container {
                padding: 1em;
                max-width: 768px;
                margin: 0 auto;
            }
            
            #error {
                color: #FF0000;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <gs-page>
            <gs-header flex-horizontal>
                <gs-button icon="cog" icononly style="visibility: hidden;"></gs-button>
                <center flex><h3>Login</h3></center>
                <gs-button href="/certificate/index.html" icon="cog" icononly></gs-button>
            </gs-header>
            <gs-body>
                <div id="container">
                    <gs-text id="normal-uname" placeholder="Username" autocapitalize="off" type="email"></gs-text>
                    <br />
                    <gs-text id="normal-pword" placeholder="Password" type="password"></gs-text>
                    <br />
                    <gs-button id="button-login">Sign In</gs-button>
                    <br />
                    <br />
                    <div id="error"></div>
                </div>
            </gs-body>
        </gs-page>
    </body>
</html>
